<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hr样式</title>
<style type="text/css">
 
 textarea{
  width:800px;
  height:200px;
 }
 #hrDiv{
 width:300px;
 float: left;
 }
 
.hr0{ height:1px;border:none;border-top:1px dashed #0066CC;}
.hr1{ height:1px;border:none;border-top:1px solid #555555;}
.hr2{ height:3px;border:none;border-top:3px double red;}
.hr3{ height:5px;border:none;border-top:5px ridge green;}
.hr4{ height:10px;border:none;border-top:10px groove SkyBlue;}
.hr5{ height:1px;border:none;border-top:1px dotted #0066CC;}
</style> 
</head>
<body>

  hr0~hr4来着 <a href="http://www.codefans.net/jscss/code/918.shtml">CSS定义HR水平线的几种样式</a>

  <hr/>
 <textarea>
.hr0{ height:1px;border:none;border-top:1px dashed #0066CC;}
.hr1{ height:1px;border:none;border-top:1px solid #555555;}
.hr2{ height:3px;border:none;border-top:3px double red;}
.hr3{ height:5px;border:none;border-top:5px ridge green;}
.hr4{ height:10px;border:none;border-top:10px groove SkyBlue;}
.hr5{ height:1px;border:none;border-top:1px dotted #0066CC;}
</textarea>

 <div id="hrDiv">

  hr0<hr class="hr0" />
  hr5<hr class="hr5" />
  hr1<hr class="hr1" />
  hr2<hr class="hr2" />
  hr3<hr class="hr3" />
  hr4<hr class="hr4" /> 
 </div>
</body>
</html>